<template>
	<view class="evaluate-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<view v-if="teacherDetail">
					<image :src="teacherDetail.image" class="teacher-image"></image>
					<view class="teacher-info">
						<image :src="teacherDetail.image" class="teacher-avatar"></image>
						<view class="teacher-name">{{teacherDetail.name}}</view>
					</view>
					<view class="teacher-desc">{{teacherDetail.description}}</view>
					<view class="evaluate-title">
						<view class="left-item">
							<view>全部评价({{dataToatl}})</view>
						</view>
					</view>
				</view>
			</view>
			<view class="evaluate-list">
				<view class="evaluate-item" v-for="(item,index) in dataList" :key="index">
					<view class="evaluate-top">
						<view class="left">
							<image :src="item.avatar" class="avatar"></image>
							<view class="nickname">{{item.nickname}}</view>
						</view>
						<view class="right">{{item.createtime}}</view>
					</view>
					<view class="evaluate-center">
						<view class="left">
							<view class="tag">老师评分</view>
							<u-rate :value="item.teacher" readonly activeColor="#FDAC2D"
								inactiveColor="#D8D8D8"></u-rate>
						</view>
						<view class="right">
							<view class="tag">课程评分</view>
							<u-rate :value="item.course" readonly activeColor="#FDAC2D"
								inactiveColor="#D8D8D8"></u-rate>
						</view>
					</view>
					<view class="evaluate-bottom">{{item.content}}</view>
					<view class="evaluate-images" v-if="item.images">
						<u-album :urls="item.images" multipleSize="110" maxCount="3"></u-album>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teacher_id: null,
				teacherDetail: null,
				dataToatl: 0,
				dataList: [],
			}
		},
		onLoad(options) {
			if (options && options.teacher_id) {
				this.teacher_id = options.teacher_id
				this.getTeacherDetail()
			}
		},
		methods: {
			getTeacherDetail() {
				this.$Api.courses.getTeacherDetail({
					id: this.teacher_id,
				}).then(res => {
					this.teacherDetail = res.data
				})
			},
			queryList(pageNo, pageSize) {
				this.$Api.courses.getTeacherEvaluate({
					page: pageNo,
					limit: pageSize,
					id: this.teacher_id,
				}).then(res => {
					this.dataToatl = res.data.total
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-page {
		width: 100%;
		min-height: 100vh;
		background: #ffffff;

		.evaluate-title {
			margin: 22rpx 30rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #000000;

			.left-item {
				display: flex;
				align-items: center;
				font-weight: bold;
			}

			.evaluate-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
		}

		.teacher-image {
			width: 100%;
			height: 600rpx;
		}

		.teacher-info {
			margin-top: -30rpx;
			border-radius: 30rpx;
			padding: 30rpx 24rpx 0;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			position: relative;
			z-index: 100;
			.teacher-avatar {
				width: 74rpx;
				height: 74rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.teacher-name {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.teacher-desc {
			padding: 20rpx 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #565656;
			line-height: 48rpx;
		}

		.evaluate-list {
			margin: 0 24rpx;

			.evaluate-item {
				padding-top: 40rpx;
				border-bottom: 1rpx solid #E5E5E5;

				.evaluate-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #3A3A3A;

						.avatar {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}

					.right {
						font-size: 26rpx;
						color: #999CA7;
					}
				}

				.evaluate-center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;

					.left {
						display: flex;
						align-items: center;

						.tag {
							padding: 8rpx 10rpx;
							background: #fff8e5;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #FDAC2D;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.tag {
							padding: 8rpx 10rpx;
							background: #edf4d0;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #A3C616;
						}
					}

				}

				.evaluate-bottom {
					font-size: 26rpx;
					color: #999CA7;
					line-height: 48rpx;
					padding-bottom: 20rpx;
				}

				.evaluate-images {
					padding-bottom: 20rpx;
				}
			}

		}
	}
</style>